<template>
  <div class='container'>
     <div class='appeal'>
          <p>申诉中心</p>
           <el-button type="primary" v-on:click='dialogFormVisible = true'>发起申诉</el-button>
     </div>
     <div class='inquire'>
            <span>填写订单编号</span>
            <el-input placeholder="请输入内容" v-model="params.order" clearable maxlength='40px'></el-input>
            <span>申诉状态</span>
            <el-select v-model="params.state" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
            <el-button type='primary' v-on:click='search'>查询</el-button>
     </div>
            <el-table
      :data="dataList"
      height='500'
      style="width: 100%">
      <el-table-column
        prop="order"
        label="订单编号">
      </el-table-column>
      <el-table-column
        prop="created_time"
        label="发起时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="申诉提醒">
      </el-table-column>
      <el-table-column
        prop="content"
        label="投诉说明">
      </el-table-column>
      <el-table-column
        label="状态/操作">
           <template slot-scope="scope">
					 <el-button
						size="mini"
						type="primary"
						plain
						@click="handleEdit(scope.row)" :disabled="scope.row.state=='撤销申诉'?isDisabled=false:isDisabled=true">{{scope.row.state}}
				   	</el-button>
         </template>
      </el-table-column>
    </el-table>

    <!-- 弹框 -->
    <el-dialog title="申诉中心" :visible.sync="dialogFormVisible">
  <el-form :model="form" :rules='rules' ref='form'>
    <el-form-item label="填写订单编号" :label-width="formLabelWidth" prop='order'>
      <el-input v-model="form.order" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="填写投诉类型" :label-width="formLabelWidth" prop='type'>
      <el-select v-model="form.type" placeholder="请选择活动区域">
        <el-option label="用户退款问题" value="用户退款问题"></el-option>
        <el-option label="用户评论问题" value="用户评论问题"></el-option>
        <el-option label="用户做任务问题" value="用户做任务问题"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label-width="formLabelWidth" label='填写投诉说明' placeholder='请详尽申诉原因以及建议解决方案，限制在200字以内；' prop='content'>
          <el-input
            :rows="2"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="form.content">
          </el-input>
    </el-form-item>
    <el-form-item label='添加图片证据' :label-width="formLabelWidth">
         <el-upload
            :limit='2'
            multiple
            accept="image/gif, image/jpg,images/png,images/bmp"
            class="upload-demo"
            action="api/upload/upload"
            :on-remove="handleRemove"
            :file-list="fileList2"
            :on-success='handleSuccess'
            :before-upload="beforeAvatarUpload"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit('form')">提交</el-button>
  </div>
</el-dialog>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pageIndex"
      :page-size="params.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="count">
    </el-pagination>
  </div>
  </div>
</template>
<script src='./Appeal.js'>

</script>
<style lang='scss' scoped>
  @import './Appeal.scss'
</style>

